<template name="search">
	<view class="search themeBgColor">
		<view class="calc display flow themeBgColor searchAre">
			<view class="display display_1 flow searchItemAre">
				<view class="display flow searchItem">
					<uni-icons :type="'search'" :color="'grey'" size="18" />
					<block v-if="isSearch">
						<input class="pColor input" type="text" v-model="inputVal" focus @input="InputVal" placeholder="搜索您感兴趣的商品~" @confirm="searchClick"/>
					</block>
					<block v-else>
						<text class="pColor pInput" @click="inputClick">{{inputTxt}}</text>
					</block>
				</view>
				<uni-icons :type="'clear'" :color="'grey'" size="20" @click="click" v-if="isInput"/>
			</view>
			<!-- <view class="messageAre" v-if="isMessage" @click="messageClick">
				<image src="/static/images/icon/message.png"></image>
				<uni-badge class="bg" :text="messageNum" type="error" size="small" v-if="messageNum > 0"></uni-badge>
			</view> -->
			<!-- <block v-if="!isMessage">
				<text style="font-size: 28rpx;" @click="searchClick">搜索</text>
			</block> -->
		</view>
		<block v-if="!isMessage">
			<selectAre :selectList="selectList" :current="current" @selectIndex="selectIndex"></selectAre>
		</block>
	</view>
</template>

<script>
	import util from '../common/util.js'
	import selectAre from './selectAre.vue'
	export default {
		name: 'search',
		components: {selectAre},
		props: ['isSearch','isMessage','searchTxt','current','messageNum'],
		data(){
			return{
				inputVal: '',
				isInput: false,
				inputTxt: '搜索您感兴趣的商品~',
				selectList: [
					{
						text: '商品'
					},
					{
						text: '店铺'
					}
				]
			}
		},
		created() {
			if(this.searchTxt){
				this.inputTxt = this.searchTxt
			}
		},
		methods:{
			inputClick(){
				if(this.isSearch){
					return
				}else{
					if(this.isMessage){
						uni.navigateTo({
							url: '/subPackages/goods/search/search'
						})
					}else{
						uni.navigateBack({
							delta: 1
						})
					}
					
				}
			},
			selectIndex(index){
				this.$emit('selectIndex',index)
			},
			InputVal(event){
				this.inputVal = event.detail.value
				if(event.detail.value){
					this.isInput = true
				}else{
					this.isInput = false
				}
				this.$emit('InputVal',event.detail.value)
			},
			click(){
				this.inputVal = ''
				this.isInput = false
				this.$emit('InputVal',this.inputVal)
			},
			searchClick(){
				if(this.isSearch){
					if(this.inputVal){
						this.$emit('search',this.inputVal)
					}else{
						util.showToast('none','请输入搜索内容')
					}
				}
			},
			messageClick(){
				this.$emit('messageClick')
			}
		}
	}
</script>

<style scoped lang="scss">
	.search{
		@include width;
		.searchAre {
			.searchItemAre {
				@include widthHeight(100%,60rpx);
				@include padding(0 20rpx);
				@include margin(10rpx 0);
				@include backG;
				@include borderR(30rpx);
				.searchItem {
					@include width;
					@include justify-content('s');
					.pInput{
						@include width;
						@include margin(20rpx,'left');
					}
					.input{
						@include width(80%);
						position: relative;
						@include margin(20rpx,'left');
					}
				}
			}
			.messageAre{
				@include widthHeight(50rpx);
				position: relative;
				&>image{
					@include widthHeight(50rpx);
				}
				.bg{
					position: absolute;
					top: -20rpx;
					right: -20rpx;
				}
			}
		}
	}
</style>
